<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-05-27 08:43:07
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-09-29 11:13:24
 * @FilePath: \linePatrol\vue-element-plus-admin\src\views\Personal\PersonalCenter\PersonalCenter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { computed, ref, unref } from 'vue'
import { ElDivider, ElImage, ElTag, ElTabPane, ElTabs, ElButton, ElMessage } from 'element-plus'
import defaultAvatar from '@/assets/imgs/avatar.png'
import UploadAvatar from './components/UploadAvatar.vue'
import { Dialog } from '@/components/Dialog'
import EditInfo from './components/EditInfo.vue'
import EditPassword from './components/EditPassword.vue'
import { useUserStoreWithOut } from '@/store/modules/user'
import GetSystemUserApi from '@/api/department/UserApi'
import RouteApi from '@/api/common/index'
const PATH_URL = import.meta.env.VITE_API_PHOTO_PATH
const userStore = useUserStoreWithOut()
const userInfo = computed(() => {
  return userStore.getUserInfo
})
const activeName = ref('first')
const dialogVisible = ref(false)
const uploadAvatarRef = ref<ComponentRef<typeof UploadAvatar>>()
const avatarLoading = ref(false)
userStore.setUploadAvatar(userInfo.value?.avatar)
let Image = `${PATH_URL}${userInfo.value?.avatar}`
console.log(Image);

const saveAvatar = async () => {
  try {
    avatarLoading.value = true
    const base64 = unref(uploadAvatarRef)?.getBase64()
    const res = await GetSystemUserApi.UpBase64({
      fileName: userStore.getUploadAvatar,
      base64: base64
    })
    if (res) {
      const i = await GetSystemUserApi.EditAvatar({
        userId: userInfo.value?.userId,
        avatar: res.url
      })
      if (i) {
        ElMessage.success('修改成功')
        dialogVisible.value = false
        const i = await RouteApi.GetUserInfo()
        userStore.setUserInfo(i)
        Image = `${PATH_URL}${userInfo.value?.avatar}`
      } else {
        ElMessage.error('修改失败')
      }
    } else {
      ElMessage.error('修改失败,请检查图片')
    }
  } catch (error) {
    console.log(error)
  } finally {
    avatarLoading.value = false
  }
}
</script>

<template>
  <div class="flex w-100% h-100%">
    <ContentWrap title="个人信息" class="w-400px">
      <div class="flex justify-center items-center">
        <div
          class="avatar w-[150px] h-[150px] relative cursor-pointer"
          @click="dialogVisible = true"
        >
          <ElImage
            class="w-[150px] h-[150px] rounded-full"
            :src="Image || defaultAvatar"
            fit="fill"
          />
        </div>
      </div>
      <ElDivider />
      <div class="flex justify-between items-center">
        <div>账号：</div>
        <div>{{ userInfo?.userName }}</div>
      </div>
      <ElDivider />
      <div class="flex justify-between items-center">
        <div>昵称：</div>
        <div>{{ userInfo?.nickName }}</div>
      </div>
      <ElDivider />
      <div class="flex justify-between items-center">
        <div>手机号码：</div>
        <div>{{ userInfo?.phonenumber ?? '-' }}</div>
      </div>
      <ElDivider />
      <div class="flex justify-between items-center">
        <div>用户邮箱：</div>
        <div>{{ userInfo?.email ?? '-' }}</div>
      </div>
      <ElDivider />
      <div class="flex justify-between items-center">
        <div>所属部门：</div>
        <div>{{ userInfo?.dept?.deptName ?? '-' }}</div>
      </div>
      <ElDivider />
      <div class="flex justify-between items-center">
        <div>所属角色：</div>
        <div>
          <template v-if="userInfo?.roles?.length">
            <ElTag v-for="item in userInfo?.roles || []" :key="item.roleId" class="ml-2 mb-w"
              >{{ item.roleName }}
            </ElTag>
          </template>
          <template v-else>-</template>
        </div>
      </div>
      <ElDivider />
    </ContentWrap>
    <ContentWrap title="基本资料" class="flex-[3] ml-20px">
      <ElTabs v-model="activeName">
        <ElTabPane label="基本信息" name="first">
          <EditInfo :user-info="userInfo" />
        </ElTabPane>
        <ElTabPane label="修改密码" name="second">
          <EditPassword :user-info="userInfo" />
        </ElTabPane>
      </ElTabs>
    </ContentWrap>
  </div>

  <Dialog v-model="dialogVisible" title="修改头像" width="800px">
    <UploadAvatar
      ref="uploadAvatarRef"
      :url="userInfo?.avatar || defaultAvatar"
      :Name="userInfo?.nickName"
      :id="userInfo?.userId"
    />
    <template #footer>
      <ElButton type="primary" :loading="avatarLoading" @click="saveAvatar"> 保存 </ElButton>
      <ElButton @click="dialogVisible = false">关闭</ElButton>
    </template>
  </Dialog>
</template>

<style lang="less" scoped>
:deep(.el-divider--horizontal) {
  margin: 16px 0 !important;
}
.avatar {
  position: relative;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 50px;
    color: #fff;
    background-color: rgb(0 0 0 / 40%);
    border-radius: 50%;
    content: '+';
    opacity: 0;
    justify-content: center;
    align-items: center;
  }

  &:hover {
    &::after {
      opacity: 1;
    }
  }
}
</style>
